<template>
  <div>
    <el-card>
      <div>
        <p>资讯管理</p>
      </div>
      <div class="search-item">
        <p class="io"></p>
        <div v-for="(item,index) in page" :key="index">
          
          <div v-if="item.type==='city'">
            <el-select
              v-model="searchData[item.value.province]"
              :placeholder="item.placeholder||'请输入内容'"
              class="ipt5"
              @change="changeProvince"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="searchData[item.value.city]"
              :placeholder="item.placeholder||'请输入内容'"
              class="ipt5"
            >
              <el-option
                v-for="item in cityList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="searchData[item.value.area]"
              :placeholder="item.placeholder||'请输入内容'"
              class="ipt5"
                @change="wer"
            >
              <el-option
                v-for="item in areaList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>
        </div>
          <div v-for="(item,index) in page" :key="index+'-only'">
        {{item.label||""}}
          <el-select
            v-if="item.type==='select'"
            v-model="searchData.search"
            :placeholder="item.placeholder||'请输入内容'"
            class="ipt5"
          >
            <el-option
                v-for="item in item.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
          </el-select>
        </div>
<div v-for="(v,i) in page" :key="'select'+i">
        
          <el-input
            v-if="v.type==='input'"
            v-model="searchData.value"
            :placeholder="v.placeholder||'请输入内容'"
            class="ipt5"
          ></el-input>
        </div>
        <!-- 记得上面<el-option>里面的东西改对 -->
        <p class="zhuangtai"></p>

        <div class="right">
      <button class="ipt6" @click="chaxun">查询</button>
        </div>
        <!-- <div class="search-type">
          
          <el-select v-model="searchData.status" placeholder="请选择">
           
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
        </div>-->
        <!-- <div class="search-po">
        <el-select v-model="searchData.status" placeholder="请选择">
           
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
        </el-select>-->
      </div>
      <!-- <div class="search-po">
        <el-select v-model="searchData.status" placeholder="请选择">
           
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </div>-->
      <!-- <div class="ipt">
   <el-input v-model="searchData.key" placeholder="关键字"></el-input>
      </div>-->

      <!-- </div>  -->

      <div class="nav">
        <el-table :data="tableData" style="width:100%">
          <el-table-column prop="img" label="图片">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.img"
                :preview-src-list="[scope.row.img]"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column label="楼盘名称" prop="floorName"></el-table-column>

          <el-table-column label="楼盘地址" prop="floorAddress"></el-table-column>
          <el-table-column label="发起人" prop="name"></el-table-column>
          <el-table-column label="起始时间" prop="date"></el-table-column>
        <el-table-column >
           <template slot-scope="scope">
        <!-- <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
        <el-button
          size="mini"
          type="danger"
          @click="handleDel(scope.row)">删除</el-button>
           </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getGroupList, getOneCifyData, getTwoCifyData,deln,searchhj,tuosearch} from "../api/user";

export default {
  props: {
    page: {
      type: Array,
      default: () => []
    },
   
   
  },
  data() {
    return {
      searchData: {
        // key:'',
        city: "",
        value: "",
        search:""
      },
      tableData: [],
      provinceList: [],
      areaList: [],
      cityList: []
    };
  },
  created() {
    this.getList();
    this.getli();
   
  },
  methods: {
    getList() {
      getGroupList().then(res => {
        this.tableData = res.data;
      });
    },
    getli() {
      getOneCifyData({ level: 1 }).then(res => {
        console.log(res);
        this.provinceList = res.data;
      });
    },
    changeProvince(e) {
      getTwoCifyData({ level: 2, code: e / 1000 }).then(res => {
        this.cityList = res.data;
      });
      // const o = JSON.stringify(e).slice(0,3)
      getTwoCifyData({ level: 3, code: e / 1000 }).then(res => {
        console.log(res);
        this.areaList = res.data;
      });
    },
    handleDel(data) {
      deln({ id: data.id }).then(res => {
        console.log(res);
        this.getList()
      });
    },
    chaxun(){
      searchhj({value:this.searchData.value}).then(res=>{
       this.tableData=res.data
      console.log(res)
      })
    },
     wer(e) {
      console.log(e);
      //省市区的接口
     tuosearch({code:e}).then(res=>{
         this.tableData=res.data
     })
    
      
    }
  }
};
</script>

<style lang="scss">
.search-item {
  display: flex;
}

.ipt5 {
  width: 130px;
  margin-left: 30px;
  margin-top: 10px;
}
.ipt1 {
  width: 30px;
  margin-left: 10px;
  height: 30px;
  padding: 15px 30px;
  background: blue;
  margin-top: 10px;
}
.io {
  margin-top: 20px;
}
.zhuangtai {
  margin-left: 20px;
  margin-top: 20px;
}
</style>